<template>
	<view>
		 <uni-forms ref="form" :modelValue="formData" :rules="rules" style="padding: 10rpx 20rpx; op">
			 <uni-forms-item label="个人头像">
			 	<view class="cont-box">
					<image :src="item" mode="widthFix" v-for="(item,index) in img" :key="index" @click="prevImage(index)"></image>
				</view>
			 </uni-forms-item>
			 <uni-forms-item label="手机号码" name="mobile">
			 	<uni-easyinput v-model="formData.mobile" type="number" maxlength="11" placeholder="请输入手机号码"/>
			 </uni-forms-item>
			<uni-forms-item label="用户名" name="name">
				<uni-easyinput v-model="formData.username" placeholder="请输入用户名" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="password">
				<uni-easyinput v-model="formData.password" type="password" placeholder="直接输入密码,即可修改" />
			</uni-forms-item>
		</uni-forms>
		<view style="padding: 0 30rpx;">
			<button @click="submit" style="background: #f18b49; color: #fff;font-size: 34rpx;">保存修改</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				userId: '',
				username: '',
				formData: {},
				img: ['../../static/my/head-img.png'],
				rules: {
					mobile: {
						rules: [
							{ required: true, errorMessage: '请输入正确的手机格式' },
							{ minLength: 11, errorMessage: '请输入{minLength}位数的手机号码' }
						]
					},
					name: {
						rules: [
							{ required: true, errorMessage: '请输入用户名' },
							{ minLength: 4, maxLength: 12, errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符' }
						]
					},
					password: {
						rules: [
							{ minLength: 6, maxLength: 16, errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符' }
						]
					}
				}
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			this.username = uni.getStorageSync('username')
			this.getInfo()
			
		},
		methods: {
			// 获取个人信息
			getInfo(){
				this.$http('/gjcApi/verifyToken', { username: this.username, token: this.token }, res => {
					this.formData = res
					this.formData.password = ""
					this.userId = res.user_id
				})
			},
			// 编辑个人信息
			submit() {
				this.$refs.form.validate().then(res=>{
					this.$http('/gjcApi/editMember', { data: JSON.stringify(res), user_id: this.userId }, res => {
						if(res.code == 200){
							uni.showToast({
								title: '个人信息已保存',
								icon: 'none'
							})
							setTimeout(() => {
								uni.hideToast()
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else if(res.code == 301){
							uni.showToast({
								title: '用户名已存在',
								duration: 1000,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '未修改任何信息',
								duration: 1000,
								icon: 'none'
							})
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			// 预览图片
			prevImage(i) {
				uni.previewImage({
					current: i,
					urls: this.img,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: $uni-model-color;
}
.cont-box{
	width: 580rpx;
	display: flex;
	justify-content: flex-end;
	image{
		width: 140rpx;
	}
}
</style>
